<!--  -->
<template>
  <div>
      <div class="theme">
          <div class="activity_title">
            <span>{{theme.content}}</span>
            <a href="#">更多<i class="iconfont">&#xe60c;</i></a>
            </div>
           <div class="theme_concat">
               <div class="theme_left">
                   
                   <img :src="theme.data[0].thumb" alt="">
               </div>
               <div class="theme_right">
                   <div class="theme_top">
                       <img :src="theme.data[1].thumb" alt="">
                   </div>
                   <div class="theme_btm">
                       <div class="btn_top"><img :src="theme.data[2].thumb" alt=""></div>
                       <div class="btn_bottm"><img :src="theme.data[3].thumb" alt=""></div>
                   </div>
               </div>
           </div>
      </div>
      <div class="xiakui">
        <div class="activity_title">
            <span>侠魁日记</span>
            <a href="#">更多<i class="iconfont">&#xe60c;</i></a>
        </div>
        <div class="banner_img">
            <div class="imgs">
                <img src="https://img3.youxiake.com/crop/fa6737444ee9eebe1163db89b46d338c.jpeg?imageView2/0/w/800/q/90" alt="">
            </div>
            <div class="banner_text">
               「理想国」南方南，北海北---跟我去初秋10月の浪漫广西....
            </div>
            <div class="heroInfo">
                
                <i>
                    <img src="https://img2.youxiake.com/avatar1356479_i6KPI43s93SH.jpg!x200" alt="">
                </i>
                <span>桑子Aka</span>
                <a href="#">在北海</a>
            </div>
        </div>
        
      </div>
  </div>
</template>

<script>
export default {
    props:[
        "theme"
    ],
  data () {
    return {
    };
  },
}

</script>
<style scoped lang="scss">
.xiakui{
    width: 100%;
    height: auto;
}
.banner_img{
    width: 100%;
    height: auto;
    .imgs{
        width: 100%;
        height: 4.50rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .banner_text{
        height: 1.066666rem;
        line-height: 1.066666rem;
        font-size: 0.373333rem;
        color: #1e1e1e;
        padding-left: 0.36666rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .heroInfo{
        display: flex;
        height: 1.066666rem;
        line-height: 1.066666rem;
        padding-left: 0.36666rem;
        font-size: 0.373333rem;
        i{
            width: 0.7066666666rem;
            height: 0.7066666666rem;
           
            img{
                width: 100%;
                height: 100%;
                 border-radius: 50%;
            }
            
        }
        span{
                color: #fdc522;
                margin-left: 0.22rem;
            }
            a{
                color: #979797;
                margin-left: 0.22rem;
                text-decoration: none;
            }
    }
}
.theme{
    width: 100%;
    height: auto;
    border-bottom: solid 0.1rem rgb(247, 244, 244);
    padding-bottom: 0.2rem;
}
.activity_title {
  width: 100%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  position: relative;
  span {
    color: #333;
    font-size: 0.426666rem;
    font-weight: 1000;
    margin-left: 0.3666rem;
  }
  a {
    text-decoration: none;
    font-size: 0.346666rem;
    position: absolute;
    right: 0.2666rem;
    color: #999;
  }
}
.activity_title:before {
    content: "";
    display: inline-block;
    width: .1rem;
    height: .5rem;
    position: relative;
    top: .1rem;
    background: #fed101;
}
.theme_concat{
    width: 92%;
    height: 249.5px;
    margin: 0 auto;
    display: flex;
    .theme_left{
        width: 35%;
        height: 100%;
        margin-right: 0.05rem;
        img{
                    width: 100%;
                    height: 100%;
                }
    }
    .theme_right{
        width: 65%;
        height: 100%;
        img{
                    width: 100%;
                    height: 100%;
                }
        .theme_top{
            width: 100%;
            height: 50%;
            background: #999;
            
            img{
                    width: 100%;
                    height: 100%;
                }
        }
        .theme_btm{
            width: 100%;
            height: 50%;
             background: #999;
             display: flex;
             margin-top:  0.05rem;
             img{
                    width: 100%;
                    height: 100%;
                }
            .btn_top{
                width: 50%;
                height: 100%;
                margin-right: 0.05rem;
                img{
                    width: 100%;
                    height: 100%;
                }
                
            }
            .btn_bottm{
                width: 50%;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

}
</style>